<template>
  <svg
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
    class="cursor-pointer"
    xmlns="http://www.w3.org/2000/svg"
    width="16"
    height="16"
    viewBox="0 0 16 16"
    fill="none">
    <path
      d="M5.1007 11.854C5.00697 11.9475 4.87998 12 4.74759 12H4C3.72386 12 3.5 11.7761 3.5 11.5V10.7524C3.5 10.62 3.55251 10.493 3.64601 10.3993L11.3472 2.67896C11.5424 2.48327 11.8594 2.48309 12.0548 2.67855L12.8216 3.44545C13.017 3.64089 13.0168 3.95779 12.8211 4.15297L5.1007 11.854Z"
      :fill="editColor" />
    <path
      d="M13.8412 3.12082C13.6469 3.32133 13.3261 3.32386 13.1286 3.12642L12.3737 2.37149C12.1762 2.174 12.1788 1.85304 12.3794 1.65875L12.8516 1.20149C12.9809 1.0714 13.1792 1 13.363 1C13.4534 0.999766 13.5431 1.01745 13.6267 1.05203C13.7103 1.08662 13.7862 1.13741 13.85 1.20149L14.2996 1.65101C14.3634 1.7148 14.4139 1.79058 14.4483 1.87399C14.4827 1.9574 14.5003 2.0468 14.5 2.13702C14.5 2.32212 14.4283 2.51911 14.2985 2.64894L13.8412 3.12082Z"
      :fill="editColor" />
    <path
      d="M5.5 3H3.5C2.39543 3 1.5 3.89543 1.5 5V12C1.5 13.1046 2.39543 14 3.5 14H12.5C13.6046 14 14.5 13.1046 14.5 12V8.5"
      :stroke="editColor"
      stroke-width="1.5"
      stroke-linecap="round" />
  </svg>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';

  const editColor = ref<string>('#7A7A7A');

  const handleMouseEnter = () => {
    editColor.value = '#0A0A0A';
  };

  const handleMouseLeave = () => {
    editColor.value = '#7A7A7A';
  };
</script>

<style scoped lang="scss"></style>
